<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!doctype html>
<head>
	<base href="<%=basePath%>">
	<title>节点参与者页面(任务委派)</title>
	
	<link type="text/css" rel="stylesheet" href="<%=path%>/resources/script/jquery/easyui/themes/default/easyui.css" />
    <link type="text/css" rel="stylesheet" href="<%=path%>/resources/script/jquery/easyui/themes/icon.css" />
    <link href="<%=path%>/resources/script/jquery/easyui/themes/default/linkbutton.css" rel="stylesheet" type="text/css" />
    <link href="<%=path%>/resources/script/workflow/workflow/designer/css/selector.css" rel="stylesheet" type="text/css"/>
    <link type="text/css" rel="stylesheet" href="<%=path%>/resources/script/workflow/workflow/designer/css/designer.css" />
    
 	<script type="text/javascript" src="<%=path%>/resources/script/jquery/jquery-1.11.3.js"></script>
	<script type="text/javascript" src="<%=path%>/resources/script/jquery/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="<%=path%>/resources/script/jquery/easyui/locale/easyui-lang-zh_CN.js"></script>
    
    <!-- 人员选择器 -->
	<link rel="stylesheet" href="<%=path%>/resources/script/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="<%=path%>/resources/script/ztree/js/jquery.ztree.core-3.5.js"></script>
   
<script type="text/javascript">
function selectPanel(treeDivId, listDivId, treeUrl){
	//初始化组织
	var _tree = null;
 	var _list = $.fn.zTree.init($("#"+listDivId), {
		callback: {
			onDblClick: function(event, treeId, treeNode, clickFlag){
				//console.log('del---treeNode.id=='+treeNode.id+'treeNode.name=='+treeNode.name);
				_list.removeNode(treeNode);

			}
		}
	});
	
	var treeSetting = {
		async: {
			enable: true,
			autoParam:['id'],
			//otherParam:{"id":"-1"}
			type:"post",
			url:treeUrl//"platform/orgTree"
		},
		data: {
			simpleData: {
				enable: true
			}
		},
		callback: {
			onDblClick: function(event, treeId, treeNode, clickFlag){
				//console.log('add---treeNode.id=='+treeNode.id+'treeNode.name=='+treeNode.name);
				_list.addNodes(null, {id:treeNode.id, name:treeNode.name});
			}
		}
		
	};	
	
	_tree = $.fn.zTree.init($("#"+treeDivId), treeSetting);
	
	return {
		tree:_tree,
		list:_list
	};
}

$(function(){
	var actorIds = $("#actorIds").val();
	var actorType = $("#actorType").val();

	$('#actorTab').tabs({ 
		fit:true,
		border:false,
		onSelect:function(title, index){   
        	if(index=='1'){
        		//var detail_url = "proInstance/detailView?instanceId="+ instanceId;// + '&wfType=' + wfType+'&opType='+opType;
        	 	//$("#detailFrame").attr("src",detail_url);
        	}else if(index=='2'){
        		//var flowchart_url = "proInstance/flowChart?instanceId="+ instanceId;
        		
        		//$("#flowChartFrame").attr("src",flowchart_url);
        	}
   		}
	});
 	
	var orgPanel = selectPanel("orgTree", "orgList", "platform/orgTree");
	var rolePanel = selectPanel("roleTree", "roleList", "platform/roleTree.shtml");
	var userPanel = selectPanel("userTree", "userList", "platform/userTree?name=");



	
	//userTree = $.fn.zTree.init($("#userTree"), userTreeSetting);
	$("#addOrgBtn").click(function(){
		//console.log('----------------addSelOrg22----------------------');
		var nodes = orgPanel.tree.getSelectedNodes();
		//console.log(nodes);

		if(!orgPanel.list.getNodeByParam("id", nodes[0].id, null)){
			orgPanel.list.addNodes(null, {id:nodes[0].id, name:nodes[0].name});
		}

	});
	
	//关闭按钮
	$("#closeBtn").click(function(){
		parent.closeSelectorWin();
	});
	
	
	$("#saveActor").click(function(){
		//console.log('=================saveActor==================');
		var index = $('#actorTab').tabs('getTabIndex', $('#actorTab').tabs('getSelected'))+1;
		//var actorType = '';
		var actorIds = '';
		var nodes = null;
		switch (index) {
		case 1:
			nodes = orgPanel.list.transformToArray(orgPanel.list.getNodes());
			break;
		case 2:
			nodes = rolePanel.list.transformToArray(rolePanel.list.getNodes())
			break;
		case 3:
			nodes = userPanel.list.transformToArray(userPanel.list.getNodes())
			break;
		default:
			break;
		}
		
		for(var i=0; i < nodes.length; i++ ){    
			actorIds += nodes[i].id+ '-'+ nodes[i].name +',';    
		}    
		if(actorIds != ''){
			actorIds = actorIds.substring(0, actorIds.length-1);
			parent.saveSelectorWin(index, actorIds);
		}
	});
});

</script>
		
</head>
<body class="easyui-layout">
<input type="hidden" id="actorIds" name="actorIds" value="${actorIds}">
<input type="hidden" id="actorType" name="actorType" value="${actorType}">
<div data-options="region:'center',fit:true,border:false">
	<div id="actorTab" >	
		<div title="组织机构">
			<table width="700" border="0" cellspacing="0" cellpadding="0" class="select-table">
				<tr>
					<td width="300" style="background-color: #FFFFFF; height:330px;" valign="top" class="select-td">
					 	<div id="orgTree" class="ztree" style="height:320px; overflow:auto;"></div>
		            </td>
		           	<td width="100" align="center" class="select-td">
		           		<a href="javascript:;" id="addOrgBtn" class="easyui-linkbutton" data-options="iconCls:'icon-sel-add'">添加</a><br/><br/>
		           		<a href="javascript:;" id="removeOrgBtn" class="easyui-linkbutton" data-options="iconCls:'icon-sel-remove'">移除</a><br/><br/>
		           		<a href="javascript:;" id="removeAllOrgBtn" class="easyui-linkbutton" data-options="iconCls:'icon-sel-removeall'">清空</a><br/><br/>
					</td>
					<td width="300" style="background-color: #FFFFFF;" valign="top" class="select-td">
						<div id="orgList" class="ztree" style="height:220px; overflow:auto;"></div>
					</td>
				</tr>
			</table>
		</div>
		<div title="角色">
			<table width="100%" border="0" cellspacing="0" cellpadding="0" class="select-table">
				<tr>
					<td width="300" style="background-color: #FFFFFF;height:330px;" valign="top" class="select-td">
					 	<div id="roleTree" class="ztree" style="height:320px; overflow:auto;"></div>
		            </td>
		           	<td width="100" align="center" class="select-td">
		           		<a href="javascript:;" id="addOrgBtn" class="easyui-linkbutton"> &nbsp;&gt;&nbsp; </a><br/><br/>
		           		<a href="javascript:;" class="easyui-linkbutton">&nbsp;&gt;&gt;&nbsp;</a><br/><br/>
		           		<a href="javascript:;" class="easyui-linkbutton">&nbsp;&lt;&nbsp; </a><br/><br/>
		           		<a href="javascript:;" class="easyui-linkbutton">&nbsp;&lt;&lt;&nbsp;</a>
					</td>
					<td width="300" style="background-color: #FFFFFF;" valign="top" class="select-td">
						<div id="roleList" class="ztree" style="height:220px; overflow:auto;"></div>
					</td>
				</tr>
			</table>
		</div>
		<div title="用户">
			<table width="100%" border="0" cellspacing="0" cellpadding="0" class="select-table">
				<tr>
					<td width="300" style="background-color: #FFFFFF;height:330px;" valign="top" class="select-td">
					 	<div id="userTree" class="ztree" style="height:320px; overflow:auto;"></div>
		            </td>
		           	<td width="100" align="center" class="select-td">
		           		<a href="javascript:;" id="addOrgBtn" class="easyui-linkbutton"> &nbsp;&gt;&nbsp; </a><br/><br/>
		           		<a href="javascript:;" class="easyui-linkbutton">&nbsp;&gt;&gt;&nbsp;</a><br/><br/>
		           		<a href="javascript:;" class="easyui-linkbutton">&nbsp;&lt;&nbsp; </a><br/><br/>
		           		<a href="javascript:;" class="easyui-linkbutton">&nbsp;&lt;&lt;&nbsp;</a>
					</td>
					<td width="300" style="background-color: #FFFFFF;" valign="top" class="select-td">
						<div id="userList" class="ztree" style="height:220px; overflow:auto;"></div>
					</td>
				</tr>
			</table>
		</div>
	</div>	
</div>
<div data-options="region:'south',border:false" style="text-align: center;height: 45px; line-height: 30px;">
	<a href="javascript:;" id="saveActor" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a>
	<a href="javascript:;" id="closeBtn" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消</a>
</div>
</body>
</html>